<template>
  <el-dialog v-model="visible" title="保存表单" width="500px" @close="handleClose">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="表单名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入表单名称"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="类别" prop="type">
        <el-select v-model="formData.type" placeholder="请选择类别" style="width: 100%">
          <el-option
            v-for="option in typeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="是否启用" prop="delFlag">
        <el-radio-group v-model="formData.delFlag">
          <el-radio
            v-for="option in statusOptions"
            :key="option.value"
            :label="option.value"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button @click="handleSave" type="primary" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { CanvasComponent } from '../types'
import { FORM_TYPE_OPTIONS, FORM_STATUS_OPTIONS } from '../constants'

interface Props {
  modelValue: boolean
  components: CanvasComponent[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'save': [formData: any]
}>()

const visible = ref(props.modelValue)
const saving = ref(false)
const formRef = ref<FormInstance>()

// 使用导入的常量
const typeOptions = FORM_TYPE_OPTIONS
const statusOptions = FORM_STATUS_OPTIONS

// 表单数据
const formData = reactive({
  name: '',
  type: 1, // 默认糖尿病
  delFlag: 1 // 默认启用
})

// 表单验证规则
const rules: FormRules = {
  name: [
    { required: true, message: '请输入表单名称', trigger: 'blur' },
    { min: 2, max: 50, message: '表单名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类别', trigger: 'change' }
  ],
  delFlag: [
    { required: true, message: '请选择是否启用', trigger: 'change' }
  ]
}

// 监听modelValue变化
watch(() => props.modelValue, (newValue) => {
  visible.value = newValue
  if (newValue) {
    // 重置表单数据
    formData.name = ''
    formData.type = 1
    formData.delFlag = 1
  }
})

// 监听visible变化
watch(visible, (newValue) => {
  emit('update:modelValue', newValue)
})

// 关闭对话框
const handleClose = () => {
  visible.value = false
}

// 保存表单
const handleSave = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    saving.value = true
    
    // 构建保存的数据
    const saveData = {
      ...formData,
      components: props.components,
      version: '1.0.0',
      createTime: new Date().toISOString()
    }
    
    // 触发保存事件
    emit('save', saveData)
    handleClose()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    saving.value = false
  }
}
</script>

<style scoped lang="scss">
.el-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}
</style> 